<template>
	<div style="position: relative;">
		<!--新建与编辑-->
		<el-drawer :modal="false" style="position:absolute; " size="100%" :visible.sync="drawerVisible" direction="btt"
			:modal-append-to-body="false">
			<div slot="title" style="display: flex;">
				<div style="width: 60px;">
					<el-button icon="el-icon-back" type="text" @click="drawerVisible=false">返回</el-button>
				</div>
				<div style="padding: 5px; margin-right: 20px;">|</div>
				<div style="text-align: center;font-size: 15px; font-weight: bold;padding-top:2px;">
					{{drawerType=='create'? "添加文章":"编辑文章"}}
				</div>
			</div>
			<!--表单-->
			<div style="margin: 10px;">
				<el-form :model="formData" ref="formData" label-width="100px" :rules="rules">
					<el-row :gutter="30">
						<el-col :span="12">
							<el-form-item label="文章标题" prop="title">
								<el-input v-model="formData.title" placeholder="请输入文章标题" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="文章分类" prop="catid" style="width: 100%;">
								<el-select v-model="formData.catid" placeholder="请选择" style="width: 100%;">
									<el-option :label="item.title" :value="item.catid" v-for="(item,index) in catList"
										:key="index">
										<div style="padding-left: 0px;" v-if="item.level==0">
											{{item.title}}
										</div>
										<div style="padding-left: 15px;" v-if="item.level==1">
											┠──{{item.title}}
										</div>
										<div style="padding-left: 40px;" v-if="item.level==2">
											┠──{{item.title}}
										</div>
										<div style="padding-left: 50px;" v-if="item.level==3">
											┠──{{item.title}}
										</div>

									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="作者" prop="author">
								<el-input v-model="formData.author" placeholder="作者" clearable></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="30">
						<el-col>
							<el-form-item label="内容编辑">
								<EditorUI ref="editorUI"></EditorUI>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>



			<div style="left:0px;right:0px; text-align: center;">
				<el-button size="medium" @click="drawerVisible=false;">取 消</el-button>
				<el-button type="primary" size="medium" @click="handleSave">确定</el-button>
			</div>


		</el-drawer>


		<!--原列表页面-->
		<div class="section-panel">
			<div>
				<el-button type="primary" icon="el-icon-plus" @click="handleCreate">添加文章</el-button>
			</div>
		</div>

		<div class="section-panel mt10">
			<div style="height:calc(100vh - 150px); padding-bottom:40px; box-sizing: border-box">
				<el-table :data="tableData" height="100%">
					<el-table-column type="index" width="80px" label="序号" align="center"></el-table-column>
					<el-table-column label="文章标题" prop="title"></el-table-column>
					<el-table-column label="分类名称" prop="category"></el-table-column>
					<el-table-column label="创建日期" prop="createtime"></el-table-column>
					<el-table-column label="操作" width="200px" align="center">
						<template v-slot="scope">
							<el-button-group>
								<el-button icon="el-icon-edit-outline" type="primary"
									@click="handleEdit(scope.$index,scope.row)">编辑</el-button>
								<el-button icon="el-icon-delete" type="danger">删除</el-button>
							</el-button-group>
						</template>
					</el-table-column>
				</el-table>

				<div class="flex" style="line-height: 40px;">
					<div class="flex1">
					</div>
					<div style="color: #888;">
						共{{tableData.length}}条记录
					</div>
				</div>
			</div>
		</div>
	</div>

</template>

<script>
	import http from '@/utils/http';
	import EditorUI from '@/components/myeditor.vue';
	export default {
		components: {
			EditorUI
		},
		data() {
			return {
				formData: {
					articleid: -1,
					title: '',
					author: '',
					content: '',
					catid: ''
				},
				rules: {
					"title": [{
						required: true,
						message: "标题名称不能为空!",
						trigger: "blur"
					}],
					"catid": [{
						required: true,
						message: "文章分类不能为空!",
						trigger: "change"
					}],
				},
				catList: [],
				tableData: [],
				drawerVisible: false,
				drawerType: "",
				editIndex:-1,

			}
		},
		mounted() {
			this.loadDataList();
			this.loadCategory();
		},
		methods: {
			loadCategory() {
				http.post("/api/admin/articlecategory/list_array").then(res => {
					if (res.status == 200 && res.data.code) {
						this.catList = res.data.list;
						console.log(this.tableData);
					}
				}).catch(error => {})
			},
			loadDataList() {
				const params = {
					nickname: ''
				}
				http.post("/api/admin/article/list", params).then(res => {
					if (res.status == 200 && res.data.code) {
						this.tableData = res.data.list;
					}
				}).catch(error => {})
			},
			handleCreate() {

				this.formData = {
					articleid: -1,
					title: '',
					author: '',
					content: '',
					catid: ''
				};
				this.drawerVisible = true;
				this.$nextTick(() => {
					this.$refs.editorUI.setHtml("");
				})
				this.drawerType = 'create';

			},
			handleEdit(index, data) {
				this.editIndex=index;
				this.drawerType = "edit";
				const params = {
					articleid: data.articleid
				}
				http.post("/api/admin/article/detail", params).then(res => {
					if (res.status == 200 && res.data.code) {
						this.formData = res.data.detail;
						this.$nextTick(() => {
							this.$refs.editorUI.setHtml(this.formData.content);
						})
					}
				}).catch(error => {})
				this.drawerVisible = true;

			},
			handleSave() {
				if (this.drawerType == "create") {
					this.$refs.formData.validate((ok) => {
						if (ok) {
							const params = {
								catid: this.formData.catid,
								title: this.formData.title,
								author: this.formData.author,
								content: this.$refs.editorUI.getHtml()
							}
							http.post("/api/admin/article/create", params).then(res => {
								if (res.status == 200 && res.data.code) {
									this.$message.success(res.data.msg);
									this.drawerVisible = false;
									this.loadDataList();
								}
							}).catch(error => {})
						}
					});
				}else{
					const params={
						articleid:this.formData.articleid,
						catid:this.formData.catid,
						title:this.formData.title,
						author:this.formData.author,
						content:this.$refs.editorUI.getHtml()
					}
					
					http.post("/api/admin/article/update", params).then(res => {
						if (res.status == 200 && res.data.code) {
							this.$message.success(res.data.msg);
							this.drawerVisible=false;
							this.tableData[editIndex].title=params.title;
							this.tableData[editIndex].catid=params.catid;
							this.tableData[editIndex].author=params.author;
							this.tableData[editIndex].content=params.content;
							
						}
					}).catch(error => {})
				}
			}
		}
	}
</script>

<style>

</style>